Coding from scratch isscue

  • Hello,

    I am building a clients website and he wants hyperlinks in a column and rows format. I am attempting to code using html as I am not skilled enough in CSS and the plugins I have found are not useful. Whilst adding the hyperlinks the columns will jump around after publishing. If I don’t hyperlink the text and just add text it publishes the way its supposed to. It seems to be a problem only when attempting to add the hyperlinks. If anyone can help that would be great

    • This topic was modified 2 years, 9 months ago by Jan Dembowski.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Hi there,

    Are you able to share an example of the markup? How are you creating that?

    Thread Starter jamesacp

    (@jamesacp)

    Hello,

    Thank you for your speedy response. Below is the code.

    
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* {
box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}
</style>
</head>
<body>

<div class=”row”>
<div class=”column” style=”background-color:#ffff;”
? ELECTRICAL
? PLUMBING
? POWER WASHING
? CONCRETE
? DRYWALL
? STUCCO
? PAINT
? FRAMING
? GARAGE STORAGE UNITES
(ASSEMBLY / BUILDING)
? ROUGH & FINISH CARPENTRY
*VALUE ENGIREERING
*CONSTRUCTION PROJECTS & CONSULTATION
*ELDERY AND HANDY-CAPABLE RAILS & EQUIPMENT
(INSTALLATION & ASSEMBLY)
</div>

<div class=”column” style=”background-color:#ffff;”>
? WINDOW SCREENS
? DOORS & WINDOWS
? FIREPLACES
? CABINETS
? TRASH REMOVAL & YARD CLEAN-UP
? DECKS
? FENCES
? COMMERCIAL & RESIDENTIAL
? (HOURLY & MONTHLY MAINTENANCE
? SERVICE CONTRACTS AVAILABLE)
? CONSTRUCTION & PROJECT CONSULTATION<

</div>
<div class=”column” style=”background-color:#ffff;”>]
? DEMOLTION & TRASH HALLING
? HONEY DO LISTS
? MAINTENANCE (HOURLY / MONTHY)
? AIR B&B MAINTENANCE & UPGRADES
(MONTHLY CONTRACTS AVAILABLE)
? REAL ESTATE AND RENTAL MAINTENANCE
(MONTHLY CONTRACTS AVAILABLE)
KITCHENS
BATHROOMS
MINOR ROOF REPAIRS
</div>

</div>
</div>

</body>
</html>
    • This reply was modified 2 years, 9 months ago by Jose Castaneda. Reason: code formatting
    Ramona

    (@nextend_ramona)

    I’d rather suggest avoiding the float and using grid:
    https://www.w3schools.com/css/css_grid.asp
    https://css-tricks.com/snippets/css/complete-guide-grid/

    This way you can make the columns and even make them responsive with just a couple of lines of CSS:

    .row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 10px;
    width: 100%; /* you might not need this, but I did in my WP test */
}

    And you could use flexbox:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    https://www.w3schools.com/css/css3_flexbox.asp
    for the inner elements to make the links display below another:

    .column{
    display: flex;
    flex-direction: column;
}

    Here’s a codepen example:
    https://codepen.io/nextend_ramona/pen/wvPQMPb

    Also, a > is missing from the first column’s markup. It looks like this now:
    <div class="column" style="background-color:#ffff;"
    but it needs to be like this:
    <div class="column" style="background-color:#ffff;">

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Ah. Okay so you’re coding a template (I’m guessing).

    My initial thought was you were using a plugin or page builder and it was acting oddly.

    Yeah, I would suggest using grid as well like noted above instead of the float.

    Thread Starter jamesacp

    (@jamesacp)

    Thank you both for your speedy reply, and help. I have one last question as CSS is foreign to me where html was my area of study in college. If I want to chose a different theme it changes the layout of the grid instead of the rows being horizontal it changes the rows to vertical. Is there a css coding fix for this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Coding from scratch isscue’ is closed to new replies.